<template>
  <div class="goods">
    <div class="title-msg">商品管理</div>

    <div class="option-site">
      <div class="option-site-head"><span>商品列表</span></div>
      <div class="option-site-neck">
        <Neck :root-category="goodsListAndRecordInfo.root_navs"
              :root_category_id="goodsListAndRecordInfo.root_category_id"
              :goods_category_id="goodsListAndRecordInfo.goods_category_id"
              :goods_category_username="goodsListAndRecordInfo.username"
              :name_describe_goods-category-name_root-category-name="goodsListAndRecordInfo.name_describe_goodsCategoryName_rootCategoryName"
              @screen="mScreen"
              @search="mSearch">
        </Neck>
      </div>

      <div class="option-site-table">
        <Table :list="goodsListAndRecordInfo.page.list"
               @delete="mDelete"
        ></Table>
        <Footer :count="goodsListAndRecordInfo.page.count"
                :total="goodsListAndRecordInfo.page.total"
                :index="goodsListAndRecordInfo.page.index"
                @pre="mPre"
                @next="mNext"
        ></Footer>
      </div>

    </div>
  </div>
</template>

<script>
  import Footer from "./childComps/Footer";
  import Neck from "./childComps/Neck";
  import Table from "./childComps/Table";

  import {getGoodsList, deleteGoods} from 'network/mix';
  export default {
    inject: ['reload'],
    name: "Goods",
    components: {
      Footer,
      Neck,
      Table,
    },
    data() {
      return {
        goodsListAndRecordInfo: { // 用户信息和指定的检索信息
          page: { // 当前数据的信息
            list: [], // 展示的数据集合
            count: 0, // 总记录数
            total: 0, // 总页数
            index: 1, // 当前页,默认第1页
          },
          root_navs: [], // 获取root类目

          id: 0, // 商品id
          goods_category_id: 0, // 商品类目id
          root_category_id: 0, // 商品root类目id
          username: '', // 商品类目的创建者,即商品创建者,卖家
          name_describe_goodsCategoryName_rootCategoryName: '', // 商品名字、描述,或者商品的商品类目名字、root类目名
        },
      }
    },
    mounted() {
      this.mGetGoodsList();
    },
    methods: {
      /**网络请求的方法*/
      mGetGoodsList() { // 首次加载,获取全部商品列表
        getGoodsList(0, 0, 0, '', '', 1)
          .then(result => {
            this.goodsListAndRecordInfo = result;
            // console.log(this.goodsListAndRecordInfo);
            // console.log('-----------');
            // console.log(this.goodsListAndRecordInfo.root_navs);
            // console.log(this.goodsListAndRecordInfo);
          })
          .catch(error => {
            console.log('获取商品列表失败' + error);
          })
      },

      mScreen({rci, gcd, un, n_d_gcn_rcn}) { // 筛选商品
        getGoodsList(0, gcd, rci, un, n_d_gcn_rcn, 1)
          .then(result => {
            // console.log(result);
            this.goodsListAndRecordInfo = result;
            // console.log(this.goodsListAndRecordInfo);

            this.$bus.$emit('goodsBus',{ // 通过事件总线发送事件,以使footer组件接收,实现筛选后还能使用footer进行上一页和下一页
              rci: rci,
              gcd: gcd,
              un: un,
              n_d_gcn_rcn: n_d_gcn_rcn,
            })
          })
          .catch(error => {
            console.log('筛选商品失败' + error);
          })
      },
      mSearch({rci, gcd, un, n_d_gcn_rcn}) { // 搜索
        console.log(rci +'--' + gcd + '---' + n_d_gcn_rcn);
        getGoodsList(0, gcd, rci, un, n_d_gcn_rcn, 1)
          .then(result => {
            // console.log(result);
            this.goodsListAndRecordInfo = result;
            // console.log(this.goodsListAndRecordInfo);

            this.$bus.$emit('goodsBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              rci: rci,
              gcd: gcd,
              un: un,
              n_d_gcn_rcn: n_d_gcn_rcn,
            })
          })
          .catch(error => {
            console.log('查询商品失败' + error);
          })
      },

      mPre({rci, gcd, un, n_d_gcn_rcn, i}) { // 上一页
        // console.log(rci +'--' + gcd + '---' + n_d_gcn_un_rcn);
        getGoodsList(0, gcd, rci, un, n_d_gcn_rcn, i - 1)
          .then(result => {
            // console.log(result);
            this.goodsListAndRecordInfo = result;
            // console.log(this.goodsListAndRecordInfo);

            this.$bus.$emit('goodsBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              rci: rci,
              gcd: gcd,
              un: un,
              n_d_gcn_rcn: n_d_gcn_rcn,
            })
          })
          .catch(error => {
            console.log('查询上一页商品失败' + error);
          })

      },
      mNext({rci, gcd, un, n_d_gcn_rcn, i}) { //
        // console.log(rci +'--Next------' + gcd + '---' + n_d_gcn_un_rcn);
        getGoodsList(0, gcd, rci, un, n_d_gcn_rcn, i + 1)
          .then(result => {
            // console.log(result);
            this.goodsListAndRecordInfo = result;
            // console.log(this.userListAndRecordInfo);

            this.$bus.$emit('goodsBus',{ // 通过事件总线发送事件,以使footer组件接收,实现搜索后还能使用footer进行上一页和下一页
              rci: rci,
              gcd: gcd,
              un: un,
              n_d_gcn_rcn: n_d_gcn_rcn,
            })
          })
          .catch(error => {
            console.log('查询下一页商品失败' + error);
          })
      },

      mDelete({id}) { // 通过商品id删除商品
        // console.log('delete------' + id);

        deleteGoods(id) // 调用删除商品的方法
          .then(res => {
            console.log(res);
            // this.reload(); // 刷新当前页面
            this.$router.go(0) // 使用该方法也可以刷新当前页面
            this.$succ_ty_toast.toShow('删除商品' + id + '成果', 5000);
          })
          .catch(err => {
            console.log(err);
            this.$err_ty_toast.toShow('删除id为' + id + '的商品失败！！！', 2000);
          })

      }
    }
  }
</script>

<style scoped>
  .goods {
    height: 100%;
    /*background-color: green;*/
  }
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .option-site {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    /*height: 980px;*/

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #fff;
  }
  .option-site-head {
    padding-left: 20px;
    height: 45px;
    line-height: 45px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;

    border-bottom: 1px solid #cdcdcd;
    background-color: goldenrod;/*F22E00*/

    color: white;
  }
  .option-site-neck {
    margin-left: 20px;
    margin-right: 20px;
    height: 60px;
    line-height: 60px;

    border-bottom: 1px solid #cdcdcd;

    /*background-color: green;*/
  }

  .option-site-table {
    margin-left: 20px;
    margin-right: 20px;

    height: 70%;

    /*background-color: green;*/
  }
</style>